<template>
  <a-modal
    :visible="visible"
    :width="700"
    :bodyStyle="{}"
    :footer="null"
    @ok="ok"
    @cancel="cancel"
  >
    <template slot="title">
      <span class="user-details-modal-title">订单信息</span>
    </template>

    <div>
      <a-form
        :form="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        @submit="handleSubmit"
      >
        <a-form-item>
          <template slot="label">
            <span>订单id</span>
          </template>
          <a-input
            placeholder="请输入订单id"
            v-decorator="[
              `orderId`,
              { rules: [{ required: true, message: '订单id必须填入!' }] },
            ]"
            :disabled="true"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>出发点</span>
          </template>
          <a-input
            placeholder="请输入出发点"
            v-decorator="[
              `startLocation`,
              { rules: [{ required: true, message: '出发点必须填入!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>目的地</span>
          </template>
          <a-input
            placeholder="请输入目的地"
            v-decorator="[
              `endLocation`,
              { rules: [{ required: true, message: '目的地必须填入!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>创建人</span>
          </template>
          <a-input
            placeholder="请输入创建人"
            v-decorator="[
              `createMan`,
              { rules: [{ required: true, message: '创建人必须填入!' }] },
            ]"
            :disabled="true"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>出发时间</span>
          </template>
          <a-date-picker
            placeholder="请输入出发时间"
            style="width: 100%"
            :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
            format="YYYY-MM-DD HH:mm:ss"
            v-decorator="[
              'date',
              {
                rules: [{ required: true, message: '请输入出发时间!' }],
              },
            ]"
            :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
            :disabled="true"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>计划人数</span>
          </template>
          <a-input-number
            style="width: 100%"
            placeholder="请输入计划人数"
            v-decorator="[
              `peopleNumber`,
              { rules: [{ required: true, message: '计划人数必须填写!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>确认人数</span>
          </template>
          <a-input-number
            style="width: 100%"
            placeholder="请输入确认人数"
            v-decorator="[
              `peopleNumberCheck`,
              { rules: [{ required: true, message: '确认人数必须填写!' }] },
            ]"
            :disabled="true"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>备注</span>
          </template>
          <a-input
            placeholder="请输入备注"
            v-decorator="[`remark`, { rules: [{ required: false }] }]"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>订单状态</span>
          </template>
          <a-select
            placeholder="请选择订单状态"
            v-decorator="[
              `orderStatus`,
              { rules: [{ required: true, message: '订单状态必须选择!' }] },
            ]"
          >
            <a-select-option key="1" :value="1">拼单中</a-select-option>
            <a-select-option key="2" :value="2">拼单完成</a-select-option>
            <a-select-option key="3" :value="3">订单结束</a-select-option>
            <a-select-option key="4" :value="4">拼单取消</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>押金支付状态</span>
          </template>
          <a-select
            placeholder="请选择押金支付状态"
            v-decorator="[
              `payStatus`,
              { rules: [{ required: true, message: '押金支付状态必须选择!' }] },
            ]"
          >
            <a-select-option key="1" :value="1">未支付</a-select-option>
            <a-select-option key="2" :value="2">已支付</a-select-option>
            <a-select-option key="3" :value="3">已退款</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :label-col="submitBtnLayout.labelCol"
          :wrapper-col="submitBtnLayout.wrapperCol"
        >
          <div style="text-align: center">
            <a-button
              htmlType="submit"
              type="primary"
              :loading="submitBtnLoading"
              >提交</a-button
            >
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
// import storage from "store";
import moment from "moment";
import { getAllSchool } from "../../../api/school/school";
import { updata } from "../../../api/order/order";

export default {
  name: "UserEditModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    editType: {
      type: String,
      default: "add",
    },
    OrderData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      submitBtnLoading: false, // 提交按钮是否加载状态

      password: undefined,
      orgListData: [],
      majorListData: [],

      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      formItemLayout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 19 },
      },
      submitBtnLayout: {
        labelCol: { span: 0 },
        wrapperCol: { span: 24 },
      },
      form: this.$form.createForm(this),
    };
  },
  watch: {
    OrderData(val) {
      const _this = this;
      _this.$nextTick(() => {
        _this.form.setFieldsValue({
          orderId: val.orderId,
          endLocation: val.endLocation,
          startLocation: val.startLocation,
          date: val.startTime,
          peopleNumber: val.peopleNumber,
          createMan: val.createMan,
          peopleNumberCheck: val.peopleNumberCheck,
          remark: val.remark,
          orderStatus: val.orderStatus,
          payStatus: val.payStatus,
        });
      });
    },
  },
  created() {
    this.getOrg();
  },
  methods: {
    // 自定义密码确认校验
    handlePass(rule, value, callback) {
      this.password = value;
      callback();
    },
    // 自定义密码确认校验
    handleConfirmPass(rule, value, callback) {
      if (this.password && this.password !== value && value !== "") {
        callback(new Error("两次密码输入不一致！"));
      }
      callback();
    },

    // 获取组织
    getOrg() {
      const requestValue = {
        page: 1,
        size: 99999,
      };
      getAllSchool(requestValue).then((res) => {
        const result = res.data.data;
        console.log(res);
        this.orgListData = result.list;
      });
    },
    ok() {
      this.$emit("handleOk");
    },
    cancel() {
      this.$emit("handleCancel");
    },
    handleSubmit(e) {
      e.preventDefault();

      const {
        form: { validateFields },
      } = this;

      const validateFieldsKey = [
        "orderId",
        "startLocation",
        "endLocation",
        "date",
        "peopleNumber",
        "peopleNumberCheck",
        "remark",
        "orderStatus",
        "payStatus",
      ];

      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          this.submitBtnLoading = true;
          updata(values)
            .then((res) => {
              console.log(res);
              setTimeout(() => {
                this.submitBtnLoading = false;
                this.$emit("handleOk");
              }, 2000);
            })
            .catch((err) => {
              console.log(err);
              this.submitBtnLoading = false;
            });
        }
      });
    },
    moment,
  },
};
</script>

<style lang="less" scoped>
.user-details-modal-title {
  font-size: 20px;
  font-weight: bolder;
  color: #666666;
}
</style>
